import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from "../views/Main";
import Body from "../components/Body";
import Articles from "../components/Articles";
import Hero from "../views/Hero/Hero";
import HeroKnow from "../views/Hero/HeroKnow";
import HeroHeigh from "../views/Hero/HeroHeigh";
Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Main',
    component: Main,
    children:[
      {path:'/',component:Body},
      {path:'/articles/:id',component: Articles,props:true}
    ]
  },
    {
      path: '/heroes/:id',
      component: Hero,
      props:true,
      children: [
        {path:'/heroes/:id',component: HeroKnow,props:true},
        {path:'/heroes/:id/height',component: HeroHeigh,props:true}

      ]
    }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
